<template>
<div class="demo">
    <h5>{{component.__sourceCodeTitle}}</h5>
    <div class="demo-component">
        <component :is="component"></component>
    </div>
    <div class="demo-actions">
        <Button @click="hideCode" v-if="codeVisible">隐藏代码</Button>
        <Button @click="showCode" v-else>查看代码</Button>
    </div>
    <div class="demo-code" v-if="codeVisible">
        <pre class="language-css" v-html="html"></pre>
    </div>
</div>
</template>

<script lang="ts">
import Button from "../lib/Button.vue";
import "prismjs";
import "prismjs/themes/prism.css";
import {
    computed,
    ref
} from "vue";
const Prism = (window as any).Prism;
export default {
    components: {
        Button
    },
    props: {
        component: Object,
    },
    setup(props) {
        const html = computed(() => {
            return Prism.highlight(
                props.component.__sourceCode,
                Prism.languages.html,
                "html"
            );
        });
        const showCode = () => codeVisible.value = true;
        const hideCode = () => codeVisible.value = false;
        const codeVisible = ref(false);
        return {
            Prism,
            html,
            codeVisible,
            showCode,
            hideCode
        };
    },
};
</script>

<style lang="scss" scoped>
$p: 10px;

.demo {
    border: 1px solid #888888;
    border-radius: 6px;
    margin: 16px 0;
    h5 {
        padding: $p;
        border-bottom: 1px solid #000;
    }

    .demo-component {
        padding: $p;

        >div {
                display:flex;
        }

        .demo-actions {
            padding: $p;
        }

        .demo-code {
            padding: $p;
            position: relative;

            >pre {
                >span {
                    position: relative;
                }
            }
        }
    }
}
</style>
